<template>
	<view class="content">
		<!-- 确认兑换弹窗 -->
		<uni-popup :show="type === 'choose'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<view class="uni-item flex aic">
					产品名称:<text class="utitle">{{choosepower.title}}</text>
				</view>
				<view class="uni-item flex aic">
					产品单位:<text class="utitle">{{choosepower.inventory_unit}}</text>
				</view>
				<!-- <view class="uni-item flex aic">
					品牌:<text class="utitle">{{choosepower.title}}</text>
				</view> -->
				<view class="uni-item flex aic">
					出品企业:<text class="utitle">{{goodcompany}}</text>
				</view>
				<!-- <view class="uni-item flex aic">
					组织机构代码:<text class="utitle">289120128917217</text>
				</view> -->
				<view class="uni-item flex aic">
					产品说明:<text class="utitle">{{choosepower.title}}</text>
				</view>
				<view class="uni-item flex aic">
					市场价格:<text class="utitle">￥{{choosepower.price}}</text>
				</view>
				<!-- <view class="uni-item flex aic">
					省级代理政策:<text class="utitle">获得分润5%</text>
				</view>
				<view class="uni-item flex aic">
					市级代理政策:<text class="utitle">获得分润3%</text>
				</view>
				<view class="uni-item flex aic">
					区县代理政策:<text class="utitle">获得分润1%</text>
				</view> -->
				<view class="surebtn" @click="sureit()">确认</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			展业大厅
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view style="z-index:1;padding:180upx 0upx 22upx;">
			<scroll-view scroll-y="true" class="scroll-Y" >
				<view style="padding: 20upx 30upx;display: flex;flex-wrap: wrap;" class="hot-goodbox">
					<view class="gooditem" v-for="(item,index) in powerlist" :key="index">
						<view>
							<image :src="item.images" style="height: 288upx;width:100%;border-radius: 20upx 20upx 0 0;"></image>
						</view>
						<view style="padding: 14upx;">
							<view class="goodtitle">{{item.title}}</view>
							<view style="margin: 10upx 0;" class="flex aic jc-center">
								<view class="rebtn" @click="powerchoose(item)">选择</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken: '', // token
				title:'',
				powerlist:[
				],
				page : 1,
				loadingText: '加载中...',
				type:'',
				backtype:0,//传给后台的身份参数5,7,9
				state:0,
				choosepower:{},// 已选择的哪一款
				goodcompany:''// 出品企业
			};
		},

		onLoad(options) {
			let that = this;
			// 0经销商1代理商2合伙人
			that.userToken = uni.getStorageSync('token')
			that.state = options.state
			that.backtype = options.state==0?5:(options.state==1?7:9)
			that.get_power_goods()
		},
		components:{
			uniPopup
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			togglePopup(){
				this.type = !this.type
			},
			powerchoose(i){
				this.type = 'choose'
				this.choosepower = i
				this.goodcompany = i.company.company_name
			},
			sureit(){
				let that = this
				that.type = ''
				uni.redirectTo({
					url:'showset?title='+that.choosepower.title+'&state='+that.state+'&goods_id='+that.choosepower.id
				})
			},
			onReachBottom:function(){
				this.get_power_goods();
			},
			
			get_power_goods() {
				let that = this
				uni.showLoading()
				let postdata ={
					m:0,
					n:8,
					type:that.backtype
				}
				// 列表
				let balanceList = []
				postAjax('Promotebusiness/promotebusinesslist',postdata,function(data){
					console.log(data.data)
					if(data.code==0){
						balanceList = data.data
						if (balanceList.length > 0) {
							that.powerlist = that.powerlist.concat(balanceList);
										
							that.page++; //每触底一次 page +1
						} else {
							that.loadingText = '已加载全部';
						}
						if(that.powerlist.length<10){
							that.loadingText = ''
						}
					}else{
						that.powerlist = that.powerlist.concat(balanceList)
					}
					uni.hideLoading()
				})
			},
		}
	};
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #f9f9f9;
	}
	.flex-1 {
		flex: 1
	}
	.powerprice{font-size: 28upx;color: #EC6104;}
	.gooditem {
		background-color: #fff;
		color: #fff;
		font-size: 28upx;
		border-radius: 20upx;
		width: 48%;
		margin-bottom: 20upx;
	}
	
	.hot-goodbox>.gooditem:nth-child(2n+2) {
		margin-left: 4%;
	}
	
	.goodtitle {
		overflow: hidden;
		white-space: nowrap;
		text-align: center;
		text-overflow: ellipsis;
		color: #333;
	}
	
	.pageHeader {
		position: fixed;
		top:0;left: 0;
		z-index: 10;
		width: 100%;
		height: 120upx;
		background-color: #1d84e8;
		line-height: 120upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
		display: block;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	
	.rebtn {
		display: inline-block;
		font-size: 30upx;
		border-radius: 6upx;
		width: 120upx;
		height: 58upx;
		line-height: 58upx;
		text-align: center;
		background-color: #1D84E8;
		color: #fff;
		font-size: 26upx;
	}
	.surebtn{
		display: inline-block;
		font-size: 30upx;
		border-radius: 6upx;
		width:166upx;
		height:60upx;
		line-height: 60upx;
		text-align: center;
		background-color: #FF4242;
		color: #fff;
		font-size: 26upx;
		margin: 40upx auto 0;
	}
	.rebtn::after {
		border: none;
	}
	.loading {
		text-align: center;
		line-height: 50px;
		font-size: 30upx;
		color: #666;
	}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 12px;
		width: 276px;
		background-color: #fff;
		border-radius: 10px;
	}
	.uni-item{
		font-size: 28upx;color: #333;
		border-bottom: 2upx solid #eee;
		padding: 16upx 0;
	}
	.utitle{max-width:200px;overflow: hidden;display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;}
</style>
